<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body>
  	<div class="container">
  		<div class="row">
  			<div class="col-md-2 col-md-offset-6">
  				<form id="login-form">
		  			<div class="form-group">
		  				<label for="username">用户名:</label>
		  				<input class="form-control" id="username" name="username"
		  					placeholder="请输入用户名！" type="text">
		  			</div>
		  			<div class="form-group">
		  				<label for="password">密码:</label>
		  				<input class="form-control" id="password" name="password"
		  					placeholder="请输入password！" type="password">
		  			</div>
		  			<div style="padding: 0 auto;" class="form-group">
		  				<input class="btn btn-default btn-lg" type="submit" value="登陆">
		  				<input class="btn btn-default btn-lg" type="reset" value="重置">
		  			</div>
		  		</form>
  			</div>
  			<div class="col-md-2">占据两个栅格</div>
  		</div>
  	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
        	/* 
        		校验是根据name字段的值进行匹配的
        	*/
        	$("#login-form").validate({
        		debug: true,
        		rules: {
        			username: {
        				required: true,
        				minlength: 2,
        				maxlength: 10,
        				remote: {
        					url: "/test/checkUsername",
        					type: "post",
        					data: {
        						timestamp: +new Date
        					},
        				}
        			},
        			password: {
        				required: true,
        				minlength: 2,
        				maxlength: 16
        			}
        		},
        		messages: {
        			username: {
        				required: "必须填写用户名",
        				remote: "用户名不存在"
        			},
        			password: {
        				required: "必须填写密码"
        			}
        		}
        	});
        });
    </script>
  </body>
</html>